<template>
  <div class="" style="height: 100%; width: 100%">
    <tongyongbasechart :options="options" ref="reffuhe" />
  </div>
</template>
<script>
export default {
  name: "quanwangfuhebeijignchart",
  components: {},
  data() {
    return {
      options: {},
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.quanwangfuhe": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    let scale = this.$root.setting.scale;
    this.options = {
      color: ["#00C1FE", "#1170E4", "#D8F375"],
      title: {
        text: "全网负荷预测与供热量",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        top: "30%",
        containLabel: true,
      },
      legend: {
        show: "true",
        data: ["负荷预测", "供热量", "温度"],
        top: "10%",
        selected: {},
        textStyle: {
          color: "#F5F5F5",
          fontSize: 28 * scale,
          // padding: [15, 0, 0, 0],
        },
        // icon: 'path://M467.106909 581.073455l-107.636364-108.311273a55.645091 55.645091 0 1 0-78.94109 78.475636l148.154181 149.085091a55.458909 55.458909 0 0 0 40.680728 16.663273 55.389091 55.389091 0 0 0 39.982545-17.966546l278.039273-298.426181a55.645091 55.645091 0 1 0-81.454546-75.869091L467.130182 581.073455zM139.636364 0h744.727272a139.636364 139.636364 0 0 1 139.636364 139.636364v744.727272a139.636364 139.636364 0 0 1-139.636364 139.636364H139.636364a139.636364 139.636364 0 0 1-139.636364-139.636364V139.636364a139.636364 139.636364 0 0 1 139.636364-139.636364z'
        // right: 0
      },
      xAxis: {
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff",
          textStyle: {
            color: "#ffffff",
            fontSize: 30 * scale,
          },
        },
        splitLine: { show: false },
        type: "category",
        // name: '时间',
        boundaryGap: false,
        data: ["0", "2", "4", "6", "8", "10", "12"],
      },
      yAxis: [
        {
          name: "℃",
          nameTextStyle: {
            fontSize: 30 * scale,
          },
          type: "value",
          splitLine: { show: false },
          axisLabel: {
            inside: false,
            interval: 0, //【2019年11月6日】需要全部显示出来 线上的点也才会都在
            textStyle: {
              color: "#fff", // x轴颜色
              fontWeight: "normal",
              fontSize: 30 * scale,
              // lineHeight: 22
            },
          },
        },
        {
          name: "MPa",
          type: "value",
          nameTextStyle: {
            fontSize: 30 * scale,
          },
          splitLine: { show: false },
          axisLabel: {
            inside: false,
            interval: 0, //【2019年11月6日】需要全部显示出来 线上的点也才会都在
            textStyle: {
              color: "#fff", // x轴颜色
              fontWeight: "normal",
              fontSize: 30 * scale,
              // lineHeight: 22
            },
          },
        },
      ],
      series: [
        {
          name: "负荷预测",
          type: "bar",
          yAxisIndex: 0,
          data: [
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
          ],
          smooth: true,
        },
        {
          name: "供热量",
          type: "bar",
          yAxisIndex: 0,
          data: [
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
          ],
          smooth: true,
        },
        {
          name: "温度",
          type: "line",
          yAxisIndex: 1,
          data: [
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
          ],
          // smooth: true,
        },
      ],
    };
  },
  methods: {
    loadData(n) {
      let scale = this.$root.setting.scale;
      this.options.series[0].data = [];
      this.options.series[1].data = [];
      this.options.series[2].data = [];
      this.options.xAxis.data = [];
      n.map((item) => {
        let date = item.aligntime.split(" ")[0].split("-");
        this.options.xAxis.data.push(date[1] + "-" + date[2]);
        this.options.series[0].data.push(item["f_009qc"]);
        this.options.series[1].data.push(item["sa_006qc"]);
        this.options.series[2].data.push(item["temperature"]);
      });
      this.$refs.reffuhe.myChart.setOption(this.options);
      // this.options
    },
  },
};
</script>
<style lang='scss' scoped>
</style>